// components/animation-ball/index.js

Component({

  properties: {
    imageUrl: { // 动画图片
      type: String,
      value: '',
    },
    startAnima: {
      type: Boolean,
      value: false
    },
    animaPosition: {
      type: Object,
      value: {
        startX: 10,  //被点击的+元素坐标（抛物线开始位置）
        startY: 10,
        endX: 0, // 抛物线结束位置（购物车图）
        endY: 0 
      }
    }
  },

  observers: {
    // 监听开始和结束位置的变化：更新动画样式变量
    'animaPosition.startX, animaPosition.startY, animaPosition.endX, animaPosition.endY' (startX, startY, endX, endY) {
      const style = `--startX:${startX}px;--startY:${startY}px;--endX: ${endX}px;--endY: ${endY}px;`
      this.setData({ style })
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    // 监听动画的事件
    observeAnimation(e) {
      // console.log('observeAnimation', e)
      // 最后一组动画结束 调用父组件事件：隐藏动画图标
      if (e.detail.animationName === "showAndHide") {
        this.triggerEvent("animationDone")
      }
    },

  }
})